<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__back" @click="handleBackClick">
        <i class="search__back__icon custom-icon custom-icon-back"></i>
      </div>
      <div class="search__content">
        <span><i class="search__content__icon custom-icon custom-icon-search"></i></span>
        <input class="search__content__input" placeholder="请输入商品名称" />
      </div>
    </div>
    <!-- v-show="item.headImg"  防止撕裂图片的出现 -->
    <ShopInfo :item="item" :hideBorder="true" v-if="item.headImg" />
    <Content :shopName="item.title" />
    <Cart />
    <Toast v-if="show" :message="message" />
  </div>
</template>

<script>
  import { reactive, toRefs, nextTick } from 'vue' // 路由跳转方法
  import { useRouter, useRoute } from 'vue-router'
  import ShopInfo from '@/components/ShopInfo/ShopInfo'
  import { get } from '@/utils/request.js'
  import Toast, { useToastEffect } from '@/components/Toast/Toast'
  import Content from '@/views/shop/Content'
  import Cart from '@/views/shop/Cart'

  // 获取当前商铺信息
  const useShopInfoEffect = (toastMsg, route) => {
    const data = reactive({ item: {} })
    // eslint-disable-next-line no-unused-vars
    const getItemData = async () => {
      // 可以写成： const resultData = await get(`/api/shop/${route.params.id}`)
      console.log(' route.params.id:' + route.params.id)
      const resultData = await get('/api/shop/' + route.params.id)
      if (resultData?.code === 200 && resultData?.data) {
        data.item = {
          id: resultData.data?.id,
          title: resultData.data?.name,
          sales: resultData.data?.sales,
          headImg: resultData.data?.imgUrl,
          expressLimit: resultData.data?.expressLimit,
          expressPrice: resultData.data?.expressPrice,
          highlight: resultData.data?.slogon
        }
        console.log('data.item :' + JSON.stringify(data.item))
        nextTick()
      } else {
        toastMsg('没有数据！')
      }
    }
    const { item } = toRefs(data)
    return { item, getItemData }
  }

  // 后退按钮事件
  const useBackRouterEffect = router => {
    const handleBackClick = () => {
      router.back()
    }
    return { handleBackClick }
  }

  export default {
    name: 'Shop',
    components: { ShopInfo, Toast, Content, Cart },
    // eslint-disable-next-line space-before-function-paren
    setup() {
      const router = useRouter() // 整个大路由的信息
      const route = useRoute() // 当前访问路径的信息

      const { show, message, toastMsg } = useToastEffect()
      const { item, getItemData } = useShopInfoEffect(toastMsg, route)
      const { handleBackClick } = useBackRouterEffect(router)
      getItemData()
      return { show, message, item, handleBackClick }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables';
  .wrapper {
    padding: 0 0.18rem;
  }
  .search {
    margin: 0.14rem 0 0.04rem 0;
    display: flex;
    line-height: 0.32rem; //高度会将父元素撑开
    &__back {
      width: 0.3rem;
      &__icon {
        font-size: 0.2rem;
        color: #b6b6b6;
      }
    }
    &__content {
      display: flex;
      flex: 1;
      background: $search-bg-color;
      border-radius: 0.16rem;
      &__icon {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        width: 0.44rem;
        text-align: center;
        color: $search-font-color;
      }
      &__input {
        padding-right: 0.2rem;
        width: 100%;
        display: block;
        border: none;
        outline: none;
        background: none;
        height: 0.32rem;
        font-size: 0.14rem;
        color: $content-font-color;
        &::placeholder {
          color: $content-font-color;
        }
      }
    }
  }
</style>
